<style scoped lang="scss">
    .auth-wrappe {
        display: flex;
        flex-wrap: wrap;
        margin: -10px -10px 10px;
    }
    .auth-item {
        position: relative;
        width: 300px;
        padding: 10px;
        margin: 10px;
        margin-bottom: 10px;
        border: 1px solid #dcdfe6;
        border-radius: 2px;
    }
    .auth-index {
        position: absolute;
        width: 30px;
        height: 30px;
        top: 0;
        left: 0;
        color: #999;
        font-size: 14px;
        line-height: 30px;
        text-align: center;
        background-color: #ececec;
    }
</style>
<template>
    <div>
        <page-header :title="id ? '编辑权限' : '新增权限'">
            <el-button icon="el-icon-arrow-left" size="mini" round @click="$router.go(-1)">返 回</el-button>
        </page-header>
        <page-main>
            <!-- <el-row v-if="loaded" type="flex" justify="center"> -->
            <!-- <el-col :md="12" :sm="18"> -->
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="权限名称">
                    <el-input v-model="form.modules_name" placeholder="请输入权限名称 如：角色管理" style="width: 400px;" />
                </el-form-item>
                <el-form-item label="权限配置">
                    <div class="auth-wrappe">
                        <div v-for="(child, index) in form.childs" :key="index" class="auth-item">
                            <div class="auth-index">{{ index + 1 }}</div>
                            <el-form-item
                                label="名称"
                                :prop="'childs.' + index + '.title'"
                                :rules="{
                                    required: true,
                                    message: '名称不能为空',
                                    trigger: 'blur',
                                }"
                                size="mini"
                                style="margin-bottom: 15px;"
                            >
                                <el-input v-model="child.title" placeholder="如：浏览" />
                            </el-form-item>
                            <el-form-item
                                label="权限名称"
                                :prop="'childs.' + index + '.auth_name'"
                                :rules="{
                                    required: true,
                                    message: '请填写权限',
                                    trigger: 'blur',
                                }"
                                size="mini"
                                style="margin-bottom: 15px;"
                            >
                                <el-input v-model="child.auth_name" placeholder="如：member.browse" />
                            </el-form-item>
                            <el-form-item label="接口配置" :prop="'childs.' + index + '.interface_name'" size="mini" style="margin-bottom: 15px;">
                                <el-input v-model="child.interface_name" placeholder="如：/api/member/create" />
                            </el-form-item>
                            <div class="text-right">
                                <el-button size="small" @click="removeChild(child)">删除</el-button>
                            </div>
                        </div>
                    </div>
                    <div style="text-right">
                        <el-button icon="el-icon-plus" @click="addChild">新增权限</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="快捷操作">
                    <el-input v-model="modules_name" placeholder="模块名称 如：role" style="width: 200px; margin-right: 10px;" />
                    <el-input v-model="api_url" placeholder="接口前缀 如：system/role/" style="width: 200px;" />
                    <div style="padding-top: 10px;">
                        <el-tag
                            v-for="(item, index) in defaultAuth"
                            :key="index"
                            :type="form.childs.map((item) => item.title).includes(item.title) ? 'info' : ''"
                            :style="{ marginRight: '10px', cursor: form.childs.map((item) => item.title).includes(item.title) ? 'default' : 'pointer' }"
                            @click="addDefaultChild(item)"
                        >
                            {{ item.title }}
                        </el-tag>
                        <el-button size="small" @click="addAllDefaultAuth">一键添加</el-button>
                        <el-button size="small" @click="form.childs = []">清空</el-button>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="loading" type="primary" @click="submit">{{ id ? '保存' : '立即创建' }}</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
            <!-- </el-col> -->
            <!-- </el-row> -->
        </page-main>
    </div>
</template>

<script>
import mixin from '@/mixins/mixin'
export default {
    mixins: [mixin],
    data() {
        return {
            modules_name: '',
            api_url: '',
            rules: {
                modules_name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }]
            },
            form: {
                modules_name: '',
                childs: []
            },
            defaultAuth: [
                {
                    title: '浏览',
                    auth_name: 'browse',
                    interface_name: '',
                    interface_name_suffix: 'tabulation'
                },
                {
                    title: '创建',
                    auth_name: 'create',
                    interface_name: '',
                    interface_name_suffix: 'create'
                },
                {
                    title: '编辑',
                    auth_name: 'edit',
                    interface_name: '',
                    interface_name_suffix: 'update'
                },
                {
                    title: '删除',
                    auth_name: 'delete',
                    interface_name: '',
                    interface_name_suffix: 'delete'
                }
            ]
        }
    },
    computed: {
        id() {
            return this.$route.params.id
        }
    },
    created() {
        // 编辑
        if (this.id) {
            this.getFormData()
        } else {
            // 新增
            this.loaded = true
        }
    },
    methods: {
        submit() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    const requestUrl = this.id ? 'system/shop-auth/update' : 'system/shop-auth/create'
                    this.loading = true
                    this.$api
                        .post(requestUrl, this.form)
                        .then(() => {
                            this.$message.success('创建成功')
                            this.back()
                        })
                        .catch(() => {
                            this.loading = false
                        })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        getFormData() {
            this.$api
                .post('system/shop-auth/detail', {
                    id: this.id
                })
                .then(res => {
                    this.form = res.data.data
                    this.loaded = true
                })
        },
        addChild(auth = null) {
            this.form.childs.push(
                auth || {
                    title: '',
                    auth_name: '',
                    interface_name: ''
                }
            )
        },
        addDefaultChild(auth) {
            const nowAuth = this.form.childs.map(item => item.title)
            if (!nowAuth.includes(auth.title)) {
                const { title, auth_name, interface_name_suffix } = auth
                this.addChild({
                    title,
                    auth_name: this.modules_name ? `${this.modules_name}.${auth_name}` : auth.name,
                    interface_name: this.api_url ? `${this.api_url}/${interface_name_suffix}` : interface_name_suffix
                })
            }
        },
        addAllDefaultAuth() {
            this.defaultAuth.forEach(auth => {
                this.addDefaultChild(auth)
            })
        },
        removeChild(item) {
            var index = this.form.childs.indexOf(item)
            if (index !== -1) {
                this.form.childs.splice(index, 1)
            }
        }
    }
}
</script>
